'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useState } from 'react'

const linkData = [
  { name: 'About', path: '/dashboard/about' },
  { name: 'Blog', path: '/dashboard/blog' }
]

export default function DashboardLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  const [count, setCount] = useState(0)
  const pathname = usePathname()
  console.log(pathname, 'pathname')

  return (
    <div className="border-2 border-dashed border-black p-4 w-1/2 mx-auto mt-10">
      <div className="flex gap-4 font-bold text-lg mb-4 ">
        {linkData.map(({ name, path }) => {
          return (
            <Link
              href={path}
              className={pathname == path ? 'text-purple-500' : ''}
              key={name}
            >
              {name}
            </Link>
          )
        })}
      </div>
      <div>我是Dashboard Layout {count} </div>
      <button
        className="bg-black text-white p-2 my-4 rounded-md"
        onClick={() => setCount(count + 1)}
      >
        增加
      </button>
      {children}
    </div>
  )
}
